<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>投注记录</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://cdn.bootcss.com/dayjs/1.7.8/dayjs.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/bootstrap-table.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/locale/bootstrap-table-zh-CN.min.js"></script>
<link href="/css/common/common.css" rel="stylesheet" type="text/css">
<style type="text/css">
.betting-record-table .betting-record-order-no {
	color: #2765a1;
	cursor: pointer;
}

.betting-record-table .betting-record-state {
	color: #ec494c;
}
</style>
</head>

<body style="height: 100%;">
	<div class="container">
		<div th:replace="common/header::html"></div>
		<div th:replace="common/personal-navbar::html"></div>
		<div id="betting-record" v-cloak>
			<form class="form-inline common-query-cond-form">
				<div class="form-group common-query-cond">
					<label>游戏:</label> <select class="form-control-sm" v-model="gameCode">
						<option value="">全部游戏</option>
						<option v-for="dictItem in gameDictItems" :value="dictItem.dictItemCode">{{dictItem.dictItemName}}</option>
					</select>
				</div>
				<div class="form-group common-query-cond">
					<label>时间:</label><input type="date" class="form-control-sm" v-model="startTime"><span>到</span><input type="date" class="form-control-sm" v-model="endTime">
				</div>
				<div class="form-group common-query-cond">
					<label>状态:</label> <select class="form-control-sm" v-model="state">
						<option value="">全部</option>
						<option v-for="dictItem in bettingOrderStateDictItems" :value="dictItem.dictItemCode">{{dictItem.dictItemName}}</option>
					</select>
				</div>
				<button type="button" class="btn btn-danger btn-sm" v-on:click="refreshTable">搜索</button>
			</form>
			<table class="common-table betting-record-table"></table>
		</div>
		<div th:replace="component/betting-order-details-modal::html"></div>
	</div>
	<script type="text/javascript">
		var bettingRecord = new Vue({
			el : '#betting-record',
			data : {
				gameCode : '',
				gameDictItems : [],
				startTime : dayjs().format('YYYY-MM-DD'),
				endTime : dayjs().format('YYYY-MM-DD'),
				state : '',
				bettingOrderStateDictItems : []
			},
			computed : {},
			created : function() {
			},
			mounted : function() {
				this.loadGameDictItem();
				this.loadBettingOrderStateDictItem();
				this.initTable();
			},
			methods : {

				loadGameDictItem : function() {
					var that = this;
					that.$http.get('/dictconfig/findDictItemInCache', {
						params : {
							dictTypeCode : 'game'
						}
					}).then(function(res) {
						this.gameDictItems = res.body.data;
					});
				},

				loadBettingOrderStateDictItem : function() {
					var that = this;
					that.$http.get('/dictconfig/findDictItemInCache', {
						params : {
							dictTypeCode : 'bettingOrderState'
						}
					}).then(function(res) {
						this.bettingOrderStateDictItems = res.body.data;
					});
				},

				initTable : function() {
					var that = this;
					$('.betting-record-table').bootstrapTable({
						classes : 'table table-hover',
						height : 540,
						url : '/betting/findMyBettingOrderInfoByPage',
						pagination : true,
						sidePagination : 'server',
						pageNumber : 1,
						pageSize : 10,
						pageList : [ 10, 25, 50, 100 ],
						queryParamsType : '',
						queryParams : function(params) {
							var condParam = {
								pageSize : params.pageSize,
								pageNum : params.pageNumber,
								gameCode : that.gameCode,
								startTime : that.startTime,
								endTime : that.endTime,
								state : that.state
							};
							return condParam;
						},
						responseHandler : function(res) {
							return {
								total : res.data.total,
								rows : res.data.content
							};
						},
						columns : [ {
							field : 'orderNo',
							title : '订单号',
							cellStyle : {
								classes : 'betting-record-order-no'
							}
						}, {
							field : 'bettingTime',
							title : '投注时间'
						}, {
							field : 'gameName',
							title : '游戏'
						}, {
							field : 'issueNum',
							title : '期号'
						}, {
							field : 'stateName',
							title : '状态',
							cellStyle : {
								classes : 'betting-record-state'
							}
						}, {
							field : 'totalBettingAmount',
							title : '投注金额',
							formatter : function(value) {
								return value + '元';
							}
						}, {
							field : 'totalWinningAmount',
							title : '中奖金额',
							formatter : function(value) {
								return value + '元';
							}
						}, {
							field : 'totalProfitAndLoss',
							title : '盈亏',
							formatter : function(value) {
								return value + '元';
							}
						}, {
							title : '操作',
							formatter : function(value, row, index) {
								if (row.cancelOrderFlag) {
									return '<button type="button" class="cancel-order-btn btn btn-outline-danger btn-sm">撤单</button>';
								}
							},
							events : {
								'click .cancel-order-btn' : function(event, value, row, index) {
									that.cancelOrder(row.id);
								}
							}
						} ],
						onClickCell : function(field, value, row) {
							if ('orderNo' == field) {
								bettingOrderDetailsModal.loadAndShowBettingOrderDetails(row.id);
							}
						}
					});
				},
				refreshTable : function() {
					$('.betting-record-table').bootstrapTable('refreshOptions', {
						pageNumber : 1
					});
				},

				cancelOrder : function(orderId) {
					var that = this;
					layer.confirm('确定要撤单吗?', {
						icon : 7,
						title : '提示'
					}, function(index) {
						layer.close(index);
						that.$http.get('/betting/cancelOrder', {
							params : {
								orderId : orderId
							}
						}).then(function(res) {
							layer.alert('操作成功!', {
								icon : 1,
								time : 3000,
								shade : false
							});
							that.refreshTable();
						});
					});
				}
			}
		});
	</script>
</body>
</html>